require('./index.css');
require('page/common/top-head-menu/index.js');
require('page/common/head-search/index.js');
require('page/common/footer/index.js');
require('page/common/bread-menu/index.js');
require('page/common/right-easy-menu/index.js');
require('util/pic_tab');
require('page/common/inquery/index.js')
import _mm from 'util/mm.js'
import _tool from 'util/tool'
import _all from 'service/all-service';
import validate from 'jquery-validation';
const page ={
    init() {
        const _this = this;
        this.loadInfo();
        setTimeout(function () {
            _this.loadSlider();
        },100);
        this.bindEvent();
        this.initValidate();
    },
    loadInfo() {
        _all.getDisplayInfo(_mm.getUrlParam('bId'), res => {
            $('.introduce-content').html(res.data.introduce);
            const tpl = require('./display.string'), html = _mm.renderHtml(tpl, {data: res.data});
            $('.left-con').html(html);
            $('.big-img').html();$('.small-img').html();
            for (let i = 0; i < res.data.images.length; i++) {
                $('.big-img').append('<li><a href="javascript:;"><img src="'+res.data.images[i].url+'" width="350" height="300"/></a></li>');
                $('.small-img').append('<li><a href="javascript:;"><img src="'+res.data.images[i].url+'" width="80" height="80"/></a></li>');
            }
        }, err => {
            _tool.msgShakeLayer(err.message);
        });
    },
    loadSlider() {
        $('#picSlider').banqh({
            box:"#demo1",//总框架
            pic:"#ban_pic1",//大图框架
            pnum:"#ban_num1",//小图框架
            prev_btn:"#prev_btn1",//小图左箭头
            next_btn:"#next_btn1",//小图右箭头
            pop_prev:"#prev2",//弹出框左箭头
            pop_next:"#next2",//弹出框右箭头
            prev:"#prev1",//大图左箭头
            next:"#next1",//大图右箭头
            pop_div:"#demo2",//弹出框框架
            pop_pic:"#ban_pic2",//弹出框图片框架
            pop_xx:".pop_up_xx",//关闭弹出框按钮
            mhc:".mhc",//朦灰层
            autoplay:true,//是否自动播放
            interTime:5000,//图片自动切换间隔
            delayTime:400,//切换一张图片时间
            pop_delayTime:400,//弹出框切换一张图片时间
            order:0,//当前显示的图片（从0开始）
            picdire:true,//大图滚动方向（true为水平方向滚动）
            mindire:true,//小图滚动方向（true为水平方向滚动）
            min_picnum:5,//小图显示数量
            pop_up:true//大图是否有弹出框
        });
    },
    submitInfo() {
        var flag = $('#buyForm').valid();
        if (!flag) {
            return;
        }
        const _this = this;
        let formData = $('#buyForm').serializeArray();
        formData = _mm.serializeJsonObj(formData);
        console.log(formData);
        _all.sendFeedback(JSON.stringify(formData), res => {
            _tool.msgShakeLayer('Successful submission！');
            debugger
            $('#buyForm').children('input').val('');
            $('#buyForm').children('select').val('');
            $('#buyForm').children('textarea').val('');
            // $('#askCon').hide();
        }, err => {
            _tool.msgShakeLayer(err.message);
        });
    },
    bindEvent() {
        const _this = this;
        const sendInfo = function () {
            _this.submitInfo();
        };
        const openLayer = function () {
            const name = $(this).attr('data-name')
            layer.open({
                type: 1,
                title: false,
                content: '<div class="tip-con"><div>Product has been added to cart: '+ name +'</div><div><a href="/cart.html">show cart</a></div></div>',
                area: ['600px', '140px']
            });
        };
        const openForm = function () {
            $('.ask-about-con').show();
            $('#model').val($(this).attr('data-model'));
            $('#subject').val($(this).attr('data-name'));
        };
        const closeForm = function () {
            $('.ask-about-con').hide();
        };
        $('#sendBuy').on('click', sendInfo);
        $('#closeForm').on('click', closeForm);
        $(document).on('click', '.quote', openLayer);
        $(document).on('click', '#ask', openForm);
    },
    initValidate() {
        jQuery.validator.addMethod("isphoneNum", function (value, element) {
            var length = value.length;
            var mobile = /^1[3|5|8]{1}[0-9]{9}$/;
            return this.optional(element) || (length == 11 && mobile.test(value));
        }, "请正确填写您的手机号码");
        $('#buyForm').validate({
            errorPlacement: function(error, element) {
                $(element).siblings('.error-tip').html(error);
            },
            ignore: [],
            rules: {
                name: "required",
                company: "required",
                country: "required",
                email: {
                    required: true,
                    email: true
                },
                phone: {
                    required: true,
                    isphoneNum: true
                }
            },
            messages: {
                name: "please enter your name.",
                company: "please enter your company name.",
                country: "please choose your country.",
                email: {
                    required: 'please enter your email.',
                    email: 'please check your email.'
                },
                phone: {
                    required: 'please enter your phone number.',
                    isphoneNum: 'please check your phone number.'
                }
            }
        });
    }
};

module.export = page.init();